<template>
  <!--生成绿卡区域-->
  <div class="lvka" style="margin-top: 1rem">
    <van-button plain type="primary" @click="setInfo()" size="large" style="margin-bottom: 0.2rem">点击更换头像和姓名
    </van-button>
    <!-- 职场绿卡 -->
    <div class="green" id="creditCertificate" v-show="isShowCertificate">
      <div class="people">
        <div class="headcircle">
          <img :src="info.head_img" alt="" class="head-image">
        </div>
        <h3 style="margin-top: 0.2rem">{{info.name}}</h3>
      </div>
      <!-- 文字 -->
      <div class="font">
        <p> 恭喜您在职场官全国职场征信系统中完成查询 工作，成功确认您的职场征信等级：
          <span class="youxiu">优秀</span>！
        </p>
        <p> 我们相信：您是一个
          <span class="advantage">{{info.content}}</span> 的职场精英。特颁此证，以资鼓励！
        </p>
      </div>
      <!-- 二维码 -->
      <div class="ewm" ref="creditCertificate">
        <img :src="info.qrcode" alt="">
      </div>
      <!-- 署名 -->
      <div class="name" ref="signature">
        <h6 style="margin-bottom:5px;">职场官</h6>
        <h6>{{currentDate}}</h6>
      </div>
    </div>
    <div ref="creditCertificateImg">
      <img :src="creditCertificateImg" style="margin-top: -0.3rem">
    </div>
    <h4 style="margin-top: 0.1rem">长按保存和分享图片</h4>
  </div>
</template>

<script>
  import domtoimage from 'dom-to-image';

  export default {
    data() {
      return {
        isShowCertificate: true,
        currentDate: '',
        creditCertificateImg: '',
        info: {}
      }
    },
    props: {
      whitelistInfo: {},
      keyword: {},
    },
    watch: {
      whitelistInfo() {
        this.info = JSON.parse(JSON.stringify(this.whitelistInfo));
      },
    },
    created() {
    },
    methods: {
      setInfo() {    //重新设置头像信息
        this.$emit('setInfo');
      },
      domToImage(userInfo) {      //生成征信证书
        this.isShowCertificate = true;
        this.creditCertificateImg = '';
        if (userInfo) {
          // console.log(this.info)
          this.info.head_img = userInfo.head_img;
          this.info.name = userInfo.name;
        } else {
          this.info.head_img = 'static/icon_pc/icon/defaultCreditCertificate.png';
          this.info.name = this.keyword;
        }

        this.currentDate = this.getCurrentDate();
        let loadNotify = this.$toast.loading({
          mask: true,
          message: '加载中...',
          duration: 0,
        });
        setTimeout(() => {
          console.log('开始转化');
          var node = document.getElementById('creditCertificate');
          node.style.height = $(node).height() + 22 + 'px';
          node.style.width = $(node).width() + 6 + 'px';
          this.$refs.creditCertificate.style['margin-bottom'] = '22px';
          this.$refs.signature.style['margin-bottom'] = '22px';

          domtoimage.toPng(node)
            .then(dataUrl => {
              this.isShowCertificate = false;
              this.creditCertificateImg = dataUrl;
              loadNotify.clear();

              node.style.height = $(node).height() - 22 + 'px';
              node.style.width = $(node).width() - 6 + 'px';
              this.$refs.creditCertificate.style['margin-bottom'] = '0px';
              this.$refs.signature.style['margin-bottom'] = '0px';
            })
            .catch(error => {
              loadNotify.clear();
              node.style.height = $(node).height() - 22 + 'px';
              node.style.width = $(node).width() - 6 + 'px';
              this.$refs.creditCertificate.style['margin-bottom'] = '0px';
              this.$refs.signature.style['margin-bottom'] = '0px';
              this.$toast.fail('转换失败，请重试');
              console.error('转换图片失败!', error);
            });
        }, 500)
      },
      getCurrentDate() {  //获取当前时间
        var date = new Date();
        var seperator1 = "-";
        // var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
    }
  }
</script>

<style scoped>
  /* 头部 */

  .searchlist .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    /* text-align: center; */
    line-height: 0.88rem;
    color: #fff;
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    padding: 0 0.2rem;
    color: #ffffff;
  }

  .searchlist .my_header .cancel {
    color: #ffffff;
  }

  .searchlist .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .searchlist .top1 {
    height: 0.88rem;
    line-height: 0.88rem;
  }

  .searchlist .goback {
    float: left;
  }

  .searchlist .my_input {
    width: 80%;
    float: left;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    background-color: rgba(0, 133, 240, 1);
    position: relative;
  }

  .searchlist .my_input input {
    height: 0.52rem;
    color: #333;
    font-size: 0.24rem;
    margin-bottom: 0;
  }

  .searchlist input[type="text"] {
    padding-top: 0.2rem;
    padding-left: 0.5rem;
  }

  .searchlist .my_img {
    width: 0.24rem;
    height: 0.24rem;
    position: absolute;
    left: 0.2rem;
    top: 0.34rem;
  }

  .searchlist .headcircle {
    width: 1.2rem;
    height: 1.2rem;
    text-align: center;
    margin: 0px auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    /* Firefox */
    -webkit-border-radius: 50%;
    /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
  }

  .head-image {
    border-radius: 50%;
    width: 1.2rem;
    height: 1.2rem;
  }

  @media screen and (width: 320px) {
    .certificate .name > input {
      top: 30%;
    }
  }

  .searchlist .isdisplay {
    display: block !important;
  }

  .searchlist #ser {
    font-size: 0.28rem;
    position: absolute;
    left: 15%;
    color: #ccc;
  }

  .cancel {
    font-size: 0.28rem;
    font-weight: 500;
    color: #fff;
    float: right;
    padding-right: 0.1rem;
  }

  .searchlist {
    background-color: #fff;
  }

  /* 总计 */

  .havedata {
    /*display: none;*/
  }

  .total {
    height: 0.88rem;
    margin-top: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    border-bottom: 0.01rem solid #ccc;
  }

  .havedata .total .tol {
    float: left;
  }

  .havedata .all {
    font-size: 0.28rem;
    color: #999;
  }

  .havedata .all .peo {
    color: #333;
  }

  .havedata .total .area {
    float: right;
  }

  .havedata .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 员工信息 */

  .havedata .info {
    margin-top: 0.3rem;
  }

  .havedata .infor {
    width: 92%;
    height: 1.7rem;
    background-color: #fff;
    border: 0.01rem solid #ccc;
    margin: 0 auto;
    padding: 0.2rem;
    position: relative;
    border-bottom: 1px solid #ccc !important;
  }

  .havedata .infor:nth-child(2) {
    border-top: 0;
    border-bottom: 0;
  }

  .havedata .infor div {
    height: 0.45rem;
    font-size: 0.26rem;
    color: #999;
  }

  .havedata .infor .xinxi {
    color: #333;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 180px;
  }

  /* 查看详情 */

  .havedata .detail {
    display: inline-block;
    width: 0.64rem;
    height: 1.7rem;
    position: absolute;
    right: 0;
    top: 0;
  }

  .havedata .detail .cont {
    width: 0.26rem;
    height: 1.7rem;
    line-height: 15px;
    font-size: 0.26rem;
    color: #0085f0;
    padding: 0.25rem 0.15rem;
    border-left: 0.001rem solid #ccc;
  }

  /* 员工信息2 */

  .havedata .info2 {
    margin: 0.3rem 0;
  }

  .havedata .info2 .inform {
    border-bottom: 0.01rem solid #ccc;
  }

  /*黑名单样式*/

  .certificate {
    background-color: #f8f8f8;
    /*display: none;*/
  }

  /* 总计 */

  .certificate .area span {
    font-size: 0.28rem;
    color: #0085f0;
  }

  /* 查询结果 */

  .certificate .serresult {
    height: 0.88rem;
    margin-top: 0.2rem;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    background-color: #fff;
  }

  .certificate .result {
    /* margin-top: .88rem; */
    font-size: 0.28rem;
    color: #0085f0;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  .result span {
    font-size: 0.34rem;
    color: #f40a0a;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
  }

  /* 输入证书信息 */

  .certificate .zsinfo {
    position: relative;
  }

  .certificate .zsinfo h5 {
    color: #999;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    padding: 0 0.3rem;
    margin: 0;
    padding-top: 0.41rem;
    margin-bottom: 0.24rem;
  }

  /* 头像 */

  .certificate .touxiang {
    height: 1.4rem;
    border-bottom: 0.001rem solid #ccc;
    background-color: #fff;
  }

  .certificate .padd-right {
    padding-right: 0.25rem;
    line-height: 1.4rem;
    background-color: #fff;
    overflow: hidden;
  }

  .certificate .namexm input {
    width: 50%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: right;
    position: absolute;
    right: 0.2rem;
    border: none;
  }

  .certificate .padd-name {
    height: 0.88rem;
    background-color: #fff;
    line-height: 0.88rem;
  }

  .certificate .padd-left {
    font-size: 0.3rem;
    color: #333;
    font-weight: 500;
    padding-left: 0.3rem;
  }

  .certificate .name {
    font-size: 0.25rem;
    color: #666;
    float: right;
    width: 16%;
    height: 1.4rem;
  }

  .certificate .name img {
    width: 1rem;
    height: 1rem;
  }

  .certificate .name > input {
    border: none;
    padding-top: 0.3rem;
    text-align: right;
    width: 19%;
    height: 1.5rem;
    position: absolute;
    right: 0.2rem;
    opacity: 0;
  }

  /* 默认使用账户信息 */

  .certificate .countinfo {
    font-size: 0.26rem;
    color: #0085f0;
    padding-right: 0.27rem;
    bottom: -65%;
    right: 0;
    position: absolute;
  }

  /* 生成征信证书 */

  .certificate .button {
    text-align: center;
    margin-top: 25%;
    color: #ffffff;
  }

  .certificate .btn {
    width: 93.33%;
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    border-radius: 0.15rem;
  }

  /*生成绿卡区域*/

  .lvka {
    background-color: #fff;
    /*display: none;*/
    height: 100%;
  }

  /* 职场绿卡 */

  .lvka .green {
    width: 6.85rem;
    height: 9.55rem;
    background: url("../../../../static/icon_pc/icon/pic_certificate.png");
    background-size: 6.85rem 9.55rem;
    margin: 0.43rem auto;
    position: relative;
  }

  .lvka .people {
    text-align: center;
    padding-top: 32%;
  }

  .lvka .people img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50% !important;
  }

  .lvka .people h3 {
    font-size: 0.3rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(1, 1, 1, 1);
    line-height: 0.4rem;
  }

  /* 文字 */

  .lvka .font {
    width: 5.72rem;
    height: 2.37rem;
    margin: 0 auto;
    margin-top: 0.8rem;
  }

  .lvka .font p {
    font-size: 0.26rem;
    color: #666;
    text-indent: 2em;
    line-height: 22px !important;
  }

  .lvka .youxiu {
    color: #f40a0a;
    font-size: 0.3rem;
    font-weight: 500;
  }

  .lvka .advantage {
    color: #0085f0;
    font-size: 0.26rem;
  }

  /* 二维码 */

  .lvka .ewm {
    position: absolute;
    bottom: 0.5rem;
    left: 0.46rem;
  }

  .lvka .ewm img {
    width: 1.3rem;
    height: 1.3rem;
  }

  /* 署名 */

  .lvka .name {
    position: absolute;
    bottom: 0.5rem;
    right: 0.63rem;
    text-align: right;
  }

  /* 长按保存图片 */

  .lvka h4 {
    font-size: 0.26rem;
    color: #999;
    text-align: center;
    margin-bottom: 0.57rem;
  }
</style>
